<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖

    import Map from 'ol/Map';
    import View from 'ol/View';
    import Feature from 'ol/Feature';
    import {Stroke, Style} from 'ol/style';
    import {OSM, Vector as VectorSource} from 'ol/source';
    import {Vector as VectorLayer} from 'ol/layer';
    import TileLayer from 'ol/layer/Tile'
    import {GeoJSON} from 'ol/format';

    export default {
        name: 'VectorStrokeLayer',
        data() {
            return {}
        },
        mounted() {
            this.map = new Map({
                layers: [
                    new TileLayer({
                        source: new OSM()//加载OpenStreetMap
                    })],
                target: 'map',
                view: new View({
                    center: [116.38916015624999, 39.926588421909436],
                    projection: "EPSG:4326", //指定投影
                    zoom: 4,
                }),
            });

            let geojson = {
                "type": "FeatureCollection",
                "features": [
                    {
                        "type": "Feature",
                        "properties": {},
                        "geometry": {
                            "type": "Polygon",
                            "coordinates": [
                                [
                                    [
                                        88.330078125,
                                        26.115985925333536
                                    ],
                                    [
                                        119.091796875,
                                        26.115985925333536
                                    ],
                                    [
                                        119.091796875,
                                        37.85750715625203
                                    ],
                                    [
                                        88.330078125,
                                        37.85750715625203
                                    ],
                                    [
                                        88.330078125,
                                        26.115985925333536
                                    ]
                                ]
                            ]
                        }
                    }
                ]
            }
            //使用geojson读取要素
            let geoJSON = new GeoJSON();
            let features = geoJSON.readFeatures(geojson);
            let vector = new VectorSource();

            //要素的样式
            let layer = new VectorLayer({
                source: vector,
                style: new Style({
                    stroke: new Stroke({
                        //color: 'red',//要素的颜色
                       //color: this.gradient(),//要素的颜色
                        color: this.pattern(),//要素的颜色
                        width: 50,//宽度
                        //lineDash:[6,10],//虚线的长度和间隔
                        //lineDashOffset:3,//虚线偏移
                        lineCap:"round",
                        lineJoin:'round',
                        //miterLimit:5//只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。
                    }),
                })
            });
            vector.addFeatures(features);
            this.map.addLayer(layer);
        },
        methods: {
            gradient() {
                let pixelRatio = window.devicePixelRatio
                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');
                var grad = context.createLinearGradient(0, 0, 512 * pixelRatio, 0);
                grad.addColorStop(0, 'red');
                grad.addColorStop(1 / 6, 'orange');
                grad.addColorStop(2 / 6, 'yellow');
                grad.addColorStop(3 / 6, 'green');
                grad.addColorStop(4 / 6, 'aqua');
                grad.addColorStop(5 / 6, 'blue');
                grad.addColorStop(1, 'purple');
                return grad;
            },
            pattern (){
                let pixelRatio = window.devicePixelRatio
                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');
                canvas.width = 8 * pixelRatio;
                canvas.height = 8 * pixelRatio;
                // white background
                context.fillStyle = 'white';
                context.fillRect(0, 0, canvas.width, canvas.height);
                // outer circle
                context.fillStyle = 'rgba(102, 0, 102, 0.5)';
                context.beginPath();
                context.arc(4 * pixelRatio, 4 * pixelRatio, 3 * pixelRatio, 0, 2 * Math.PI);
                context.fill();
                // inner circle
                context.fillStyle = 'rgb(55, 0, 170)';
                context.beginPath();
                context.arc(4 * pixelRatio, 4 * pixelRatio, 1.5 * pixelRatio, 0, 2 * Math.PI);
                context.fill();
                return context.createPattern(canvas, 'repeat');
            }
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
</style>
